<template>
    <div class="container">
        <div class="row col-md-7 col-md-offset-3">


            <div class="" style="background-color: #FFFFFF;">

                <div class="col-sm-1 col-md-9">
                    <div class="thumbnail">
                        <div v-if="FanShow==true">
                        <button  v-if="isFan == 'false'" class="btn btn-success pull-right" @click="wl_fan()">关注</button>

                        <button v-if="isFan == 'true'"  class="btn btn-success pull-right" @click="wl_fan()">取关</button>
                            </div>
                        <img v-bind:src="user.tou"
                             alt="请等待" 
                             style="border-radius:50%;width: 100px;height:100px; ">
                        <div class="caption">
                            <h3>{{user.username}}</h3>
                            <p>{{user.autograph}}</p>
                            <h1 ><span style="background-color: #00a0e9" class="label label-default">{{user.job}}</span></h1>


                        </div>
                    </div>
                </div>

            </div>
        </div>


        <div class="row col-md-7 col-md-offset-3">


            <div class="" style="background-color: #FFFFFF;">

                <div class="col-sm-1 col-md-9">
                    <ul id="myTab" class="nav nav-tabs">
                        <li class="active">
                            <a href="#post" data-toggle="tab">
                                文章&nbsp;
                                <span style="background-color:black" class="badge pull-right">{{user.postcount}}</span>
                            </a>
                        </li>
                        <li>
                            <a href="#guan" data-toggle="tab"> 关注&nbsp;
                                <span  style="background-color:black"class="badge pull-right">{{count.stars_count}}</span>
                            </a>
                        </li>
                        <li>
                            <a href="#fan" data-toggle="tab">粉丝&nbsp;
                             <span style="background-color:black" class="badge pull-right">{{count.fans_count}}</span>
                            </a></li>


                    </ul>
                    <div id="myTabContent" class="tab-content">
                        <div class="tab-pane fade in active" id="post">
                            <div  v-for="item in post" class="col-md-12 col-md-offset-0" style="padding:20px; border: 1px solid rgba(232,232,232,0.96);margin-bottom: 10px;
                                     background-color: #FFFFFF">

                                <h4 class="text-left">
                                    <router-link class="wl_title" target="_blank" style="color:#0099CC" :to="{name:'show', params: { id: item.id }}">
                                    {{item.title| title}}</router-link>

                                </h4>

                            </div>


                        </div>

                        <!--关注的人-->
                        <div class="tab-pane fade" id="guan">
                            <div  v-for="item in guan" class="col-md-12 col-md-offset-0" style="padding:10px; border: 1px solid rgba(232,232,232,0.96);margin-bottom: 10px;
                                     background-color: #FFFFFF">

                                <h4 class="text-left">
                                    <router-link class="wl_title" target="_blank" style="color:#0099CC" :to="{name:'userInfo', params: { id: item.id }}">{{item.username}}</router-link>

                                </h4>

                            </div>
                        </div>

                        <!--粉丝-->
                        <div class="tab-pane fade" id="fan">
                            
                            <div  v-for="item1 in fan" class="col-md-12 col-md-offset-0" style="padding:10px; border: 1px solid rgba(232,232,232,0.96);margin-bottom: 10px;
                                     background-color: #FFFFFF">

                                <h4 class="text-left">
                                    <router-link class="wl_title" target="_blank"  style="color:#0099CC" :to="{name:'userInfo', params: { id: item1.id }}">{{item1.username}}</router-link>

                                </h4>

                            </div>
                        </div>

                    </div>
                </div>

            </div>
        </div>
    </div>
</template>

<script>
 import Vue from 'vue'
import conf from '../layout/conf.vue'//引用模块进来
    export default {
        mounted() {

                let userid=this.$route.params.id;

              this.axios.get(this.url+"&user_id="+userid).then(response=>{
                        
                        console.log(response['data']['data']);
                        let temp=response['data']['data'];
                        this.user=temp;
                        this.post=temp.post_title;
                        this.fan=temp.fans;
                        
                        this.guan=temp.stars;        
                    });

                var params = new URLSearchParams();
                params.append('user_id',userid);
            
                this.axios.post(this.fanurl,params).then(response=>{
                        
                       console.log(response['data']['data']);
                       this.count=response['data']['data'];
                         
                    });

                var temp = new URLSearchParams();
                temp.append('user_id',userid);
                var access_token=this.GetCookie("wlphp.cn");
                temp.append('access_token', access_token);
                  this.axios.post(this.isfanurl,temp).then(response=>{
                        
                        if(response.data.error==1){
                                this.FanShow=false;
                        }else{
                        this.isFan=response.data.data;
                        console.log("是否关注")
                        console.log(this.isFan);
                        
                        }
                        
                        
                        
                           
                    });
                  // this.axios.get(this.url+"&user_id="+userid).then(response=>{
                        
                  //       console.log(response['data']['data']);
                  //       this.user=response['data']['data'];
                           
                  //   });


        },
        data(){
            return {
                user:{"id":1,"name":"带","postcount":11},
                post:[{"id":1,"title":"ymh"},{"id":1,"title":"ymh"},{"id":1,"title":"ymh"}],
                fan:[{"id":1,"name":"ymh"}],
                guan:[{"id":1,"name":"梁"},{"id":1,"name":"源"},{"id":1,"name":"黄"}],
                count:{},
                isFan:false,
                FanShow:true,
                url:conf.url+"post/web/index.php?r=user/user/user",
                fanurl:conf.url+"post/web/index.php?r=user/fan/fan-gcount",        //获取关注信息
                postfanurl:conf.url+"post/web/index.php?r=user/fan/fan", //关注
                isfanurl:conf.url+"post/web/index.php?r=user/fan/isfan", //关注
                // url:conf.url+"post/web/index.php?r=user/user/user",

            }


        },

        methods:{
            wl_fan(){
     let userid=this.$route.params.id;
                 var params = new URLSearchParams();
                params.append('user_id',userid);
                 var access_token=this.GetCookie("wlphp.cn");
                params.append('access_token', access_token);
                this.axios.post(this.postfanurl,params).then(response=>{
                        
                        let temp=response['data']['data'];
                       
                       console.log(temp);
                       
                        if(temp=="关注成功"){
                            this.isFan='true';
                            this.message("","关注成功!");
                        }else{
                            this.isFan='false';
                            this.message("","取关成功!");
                        }
                         console.log(this.isFan);
                    });
            }

        },




    }

        //格式化标题
    Vue.filter('title', function(val) {
    
        if(val==null || val==""){
                    return  val;
                }

       let title=val.substring(0,28);


                        
                        return title;
    });


</script>
